<template>
<div class="editbox" :class="{'videob':type==='video'}">
  <div v-if="type==='img'" class="imgcontent">
    <el-image
        style="width: 100%;"
        src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
        fit="contain"></el-image>
  </div>
  <div ref="videoBox" v-if="type==='video'" class="imgcontent">
    <video muted
           @loadedmetadata="getM"
           ref="v"
           width="100%"
           src="http://gd.sycdn.kuwo.cn/d63b0f17f6bb0c71daa86152597c5463/60eefa6e/resource/m1/97/9/2373198294.mp4"></video>
    <div ref="line" class="line"></div>
  </div>
  <div class="caozuo">
    <slot name="footer">
      <div style="color: white">{{type=='video'?time.toFixed(2):''}}s</div>
      <div>
        <el-tooltip
            effect="dark"
            content="编辑"
            placement="top">
          <i class="el-icon-edit"></i>
        </el-tooltip>
      </div>
      <div>
        <el-tooltip
            effect="dark"
            content="移除"
            placement="top">
          <i class="el-icon-delete"></i>
        </el-tooltip>
      </div>
    </slot>
  </div>
</div>
</template>

<script>
export default {
  name: "editContent",
  props:{
    type:{
      required:true
    }
  },
  data() {
    return {
      moved:true,
      time:0
    }
  },
  mounted() {
    if (this.type==='video'){
      console.log(this.$refs.videoBox)
      this.$refs.videoBox.addEventListener('mousemove',this.moveHandler)
    }
  },
  methods: {
    moveHandler(event){
      if (this.moved){
        this.moved = false
        // console.log(event.pageX)
        let offsetWidth = this.$refs.videoBox.offsetWidth
        let offsetLeft = this.$refs.videoBox.offsetLeft
        let pageX = event.pageX
        let currentTime = this.time*((pageX - offsetLeft)/offsetWidth)
        console.log(this.time*((pageX - offsetLeft)/offsetWidth))
        this.$refs.line.style.left = pageX - offsetLeft +'px'
        this.$refs.v.currentTime = currentTime
        this.$refs.v.play()
        setTimeout(()=>{
          this.moved = true
          this.$refs.v.pause()
        },100)
      }
    },
    getM(){
      this.$nextTick(()=>{
        this.time = this.$refs.v.duration
        return this.$refs.v.duration
      })
    }
  }
}
</script>

<style scoped>
.imgcontent:hover .line{
  display: block;
}
.line{
  height: 100%;
  width: 2px;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 20px;
  display: none;
}
.videob{
  background-color: #909399 !important;
}
.caozuo{
  width: 100%;
  cursor: pointer;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.caozuo i{
  padding: 6px;
  font-weight: bolder;
  color: #999;
}
.videob i{
  color: #fff;
}
.caozuo i:hover{
  color: #2c3e50;
}
.editbox{
  width: 120px;
  height: 180px;
  background-color: #fff;
  border-radius: 4px;
  overflow: hidden;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  cursor: move;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.imgcontent{
  width: 120px;
  height: 120px;
  background-color: #afa8a8;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
</style>
